<template>
	<view class="index">
		<view class="topNav" >
			<view :class="{active:pageType==0}" @touchstart.stop="pageType=0">推荐</view>
			<view :class="{active:pageType==1}" @touchstart.stop="pageType=1">歌单</view>
			<view :class="{active:pageType==2}" @touchstart.stop="pageType=2">歌手</view>
		</view>
		<swiper style="flex: 1;"  @change="swiperChange" :current="pageType" >
			<swiper-item style="overflow: auto;">
				<recommend></recommend>
			</swiper-item>
			<swiper-item>歌单</swiper-item>
			<swiper-item>歌手</swiper-item>
		</swiper>
		<view class="bottom-music-play-controller">底部音乐播放</view>
		
		<!--左边的菜单 -->
		<left-menu></left-menu>
	</view>
</template>

<script>
	import {mapActions,mapState} from "vuex";
	import recommend from "../../components/recommend/recommend.vue"
	import leftMenu from "../../components/leftMenu.vue";
	export default {
		data() {
			return {
				pageType:0
			}
		},
		computed:{
			...mapState(["isShowLeftMenu"])
		},
		onLoad() {
			
		},
		methods: {
			...mapActions(["showLeftMenu","hideLeftMenu"]),
			swiperChange(event){
				this.pageType=event.detail.current;
			}
		},
		components:{
			recommend,
			leftMenu
		},
		onNavigationBarButtonTap(event){
			if(event.index==0){
				if(this.isShowLeftMenu){
					this.hideLeftMenu();
				}
				else{
					this.showLeftMenu();
				}
			}
		},
		onPullDownRefresh(){
			uni.stopPullDownRefresh();
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../assets/scss/common.scss";
	.index{
		@include flexbox(column);
		height:100%;
	}
	.topNav{
		@include flexbox();
		height:90upx;
		background-color:$primaryColor;
		color:#fcfcfc;
		font-size:28upx;
		justify-content:space-around;
		align-items:center;
		>view{
			&.active{
				border-bottom: 3upx solid white;
				color: white;
				font-weight: bold;
			}
		}
	}
	.bottom-music-play-controller{
		height: 120upx;
		width: 100%;
		background-color: #ececec;
	}
	
</style>
